<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 常规方式引入script标签，会造成阻塞 -->
  <!-- <script src="https://httpbin.org/delay/5"></script> -->
  <!-- 添加type=module 或者async可以让加载变为异步 不会阻塞页面的加载-->
  <!-- <script src="https://httpbin.org/delay/5" async></script> -->
  <!-- <script src="https://httpbin.org/delay/5" defer></script> -->
</head>
<body>
  <div class="app">
    <h2>script标签通常会阻塞页面的渲染，尤其是当它放在head标签内时，因为浏览器会在执行 JavaScript 代码之前停止解析 HTML。</h2>
    <h2>解决方案</h2>
    <p>
      1.在script标签上添加async 异步加载不会阻塞页面<br>
      2.使用 defer 属性。defer 属性使得脚本延迟执行，直到 HTML 文档解析完毕。<br>
      3.将 script 资源放在 body 最后。
    </p>
  </div>
  <script src="https://httpbin.org/delay/5"></script>
</body>
</html>